<template>
	<view class="auto-page" v-if="shopInfo">
		<view class="f-1 bg-white">
			<view class="shop-avator f-row nav-icon" @click="chooseImg('mer_avatar')">
				<view class="shop-msg-title f-1">店铺头像</view>
				<image class="shop-avator-pic br-16" mode="aspectFill" :src="shopInfo.mer_avatar"></image>
			</view>
			<view class="shop-banner f-row nav-icon" @click="chooseImg('mer_banner')">
				<view class="shop-msg-title f-1">店铺banner</view>
				<image class="shop-banner-pic br-10" mode="aspectFill" :src="shopInfo.mer_banner"></image>
			</view>
			<view class="shop-produce f-column">
				<view class="shop-msg-title">店铺简介：</view>
				<view style="overflow: hidden;flex: 1;height: 300rpx;margin-bottom: 30rpx;position: relative;border: 2rpx solid #e8e8e8;border-radius: 20rpx;">
					<textarea placeholder="请输入店铺简介..." placeholder-style="color:#999999" :value="shopInfo.mer_info"
						maxlength="140" @input="textareaInput($event)" style="flex: 1;min-width: 1rpx;"></textarea>
				</view>
			</view>
		</view>
		<view class="save-button click-opacity" @click="saveShopInfo">保存</view>
	</view>
</template>

<script>
	let _this;
	import SETTING from '../../api/setting.js'
	import { showToast } from '../../lib/utils.js'
	export default {
		data() {
			return {
				shopInfo: false,
			}
		},
		onLoad() {
			_this = this;
			_this.shopInfo = _this.$store.getters.getShop;
			if(!_this.shopInfo) uni.navigateBack();
		},
		methods: {
			textareaInput(e) {
				console.log(e);
				_this.shopInfo.mer_info = e.detail.value;
			},
			chooseImg(str) {
				uni.chooseImage({
				  	count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['camera','album'], //这要注意，camera掉拍照，album是打开手机相册
				    success: (res)=> {
						const tempFilePaths = res.tempFilePaths[0];
						uni.uploadFile({
							url: 'http://user.shunbo.com.cn/mer/upload/image/0/file',
							filePath: tempFilePaths,
							name: 'file',
							fileType: 'image',
							header: {
								'X-Token' : _this.$store.getters.getToken
							},
							formData: {
								'file' : tempFilePaths
							},
							success: (respon) => {
								let result = JSON.parse(respon.data.replace(/[\\]/g,''));
								console.log(result);
								_this.shopInfo[str] = result.data.src;
							},
							fail: (error) => {
								showToast('替换失败');
							}
						});
				    }
				});
			},
			saveShopInfo() {
				uni.showModal({
					title: '确定保存本次编辑吗？',
					success: (res) => {
						if(res.confirm) {
							SETTING.updateShopInfo(_this.shopInfo).then((res) => {
								showToast(res.message);
								uni.navigateBack();
							}).catch((err) => {
								console.log(err);
								showToast(err.message);
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
.shop-avator , .shop-banner , .shop-phonenumber{
	align-items: center;
	padding: 0 30rpx;
	border-bottom: 2rpx solid #ececec;
	height: 120rpx;
}
.shop-produce{
	padding: 0 30rpx;
}

.shop-avator-pic{
	width: 100rpx;
	height: 100rpx;
}
.shop-banner-pic{
	width: 284rpx;
	height: 80rpx;
}
.shop-msg-title{
	font-size: 26rpx;
	min-width: 150rpx;
	line-height: 120rpx;
}
.shop-avator-pic , .shop-banner-pic{
	vertical-align: top;
	margin-right: 30rpx;
}
.shop-phonenumber-detail{
	line-height: 120rpx;
	height: 120rpx;
	font-size: 24rpx;
	color: #999999;
	text-align: right;
	flex: 1;
	padding: 0 30rpx;
}
textarea{
	
	padding: 15rpx;
	font-size: 26rpx;
	line-height: 40rpx;
	width: inherit;
	height: inherit;
}
.save-button{
	border-radius: 10rpx;
	color: #FFFFFF;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 26rpx;
	font-weight: bold;
	background-color: #2c6ffe;
	position: absolute;
	bottom: 30rpx;
	left: 30rpx;
	right: 30rpx;
}
</style>
